<style media="screen">
    html,body{
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    }

    .container{
        width: 1680px;
        height: 1050px;
        background-repeat: no-repeat;
        background-image: url(test.jpg);
        background-attachment: fixed;
    }

    .mark{
        z-index: 10;
        position: relative;
        margin: 0 auto;
        padding: 1em;
        max-width: 23em;
        background: rgba(255, 255, 255, 0.25) border-box;
        overflow: hidden;
        border-radius: .3em;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3) inset, 0 0.5em 1em rgba(0, 0, 0, 0.6);
        text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3);
    }

    .mark::before{
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: -30px;
        z-index: -1;
        filter: blur(20px);
        background-repeat: no-repeat;
        background-image: url(test.jpg);
        background-attachment: fixed;
    }

</style>
<div class="container">
    <!-- <img src="test.jpg" alt=""> -->
    <div class="mark">
        asdfasdfasdfasdfasdfa
    </div>
</div>
